<!-- 分类选择 -->
<template>
  <v-container>
    <v-navigation-drawer
      v-model="categoryDrawer"
      width="450px"
      class="mt-4"
      absolute
      temporary
      right
    >
      <template v-slot:prepend>
        <div class="pa-2">
          <v-btn @click.stop="categoryDrawer = false" block outlined color="primary">确定</v-btn>
        </div>
      </template>
      <v-container>
        <v-row dense>
          <!-- <v-col cols="12"><v-btn @click.stop="categoryDrawer = false" outlined>确定</v-btn></v-col> -->
          <v-col cols="12">已选择分类：</v-col>
          <v-col cols="12" v-for="ca in categoryTexts" :key="ca">
            <v-chip class="primary lighten-2">{{ca}}</v-chip>
          </v-col>
          <v-col cols="12">
            <!-- multiple-active -->
            <v-text-field
              :multiple-active="multiple"
              dense
              v-model="search"
              flat
              label="搜索模块"
              solo-inverted
              hide-details
              clearable
              ></v-text-field>
            <v-treeview
              :search="search"
              :filter="filter"
              :active="[value]"
              class="white"
              :items="items"
              item-text="name"
              activatable
              item-key="cid"
              @update:active="activeUpdate"
              open-on-click
              hoverable
              dense
            >
            <!-- <template v-slot:prepend="{ item, open }">
        <v-icon v-if="item.children">
          {{ open ? 'folder_open' : 'folder' }}
        </v-icon>
      </template> -->
      <template v-slot:append="{ item }">
        <v-icon v-if="item.redirect ==='yes' ">link</v-icon>
      </template></v-treeview>
          </v-col>
        </v-row>
      </v-container>
    </v-navigation-drawer>
    <v-input
      dense
      prepend-icon="category"
      name="category"
      placeholder="请选择分类！"
      @click.stop="categoryDrawer = !categoryDrawer"
    >
      <v-row no-gutters>
        <v-col>
          <v-chip v-for="ca in categoryTexts" :key="ca" class="primary lighten-2">{{ca}}</v-chip>
          <v-btn outlined slot="label" class="ml-5">选择分类</v-btn>
        </v-col>
      </v-row>
    </v-input>
  </v-container>
</template>

<script>
import { fetchTreeData } from '@/api/admin/category.js'
// 颜色数组
const colors = [
  'red',
  'green',
  'blue',
  'purple',
  'teal',
  'cyan',
  'lime',
  'amber',
  'brown',
  'grey',
  'black'
]
export default {
  name: 'CategorySelect',
  props: {
    value: {
      type: [Array, Number],
      default: () => {
        return []
      }
    },
    multiple: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data: function() {
    return {
      search: '',
      categoryDrawer: false,
      categoryColors: colors,
      items: []
    }
  },
  created: function() {
    fetchTreeData().then(res => {
      this.items = res.data.map(e => {
        e.disabled = (e.status === 'disabled' || e.redirect === 'yes')
        return e
      })
    })
  },
  computed: {
    categoryTexts: function() {
      let text = []
      const val = this.multiple ? this.value : [ this.value ]
      // console.log(val)
      function tmpFunc(arr) {
        for (let index = 0; index < arr.length; index++) {
          if (val.includes(arr[index]['cid'])) {
            text.push(arr[index]['name'])
          }
          if (typeof arr[index]['children'] === 'object') {
            tmpFunc(arr[index]['children'])
          }
        }
      }
      tmpFunc(this.items)
      return text
    },
    filter: function() {
      return (item, search, textKey) => {
        return item.name.indexOf(search) > -1
      }
    }
  },
  methods: {
    activeUpdate: function(active) {
      if (this.multiple) {
        this.$emit('input', active)
      } else {
        this.$emit('input', active[0])
      }
    }
  }
}
</script>
